<template>
  <!-- 排行榜详情 -->
  <div id="rankingDtl">
    <header>
      <Navbar navbarText=" " />
    </header>
    <div class="songSheetInfo">
      <h2>{{ playlist.name }}</h2>
      <p>{{ "最近更新: " + playlist.updateTime }}</p>
      <div class="btn-warp">
        <van-button type="default"
                    icon="add-o"
                    @click="handleCollection">{{
          leftBtn
        }}</van-button>
        <van-button type="default"
                    icon="edit"
                    @click="handleComment">{{
          centerBtn
        }}</van-button>
        <van-button type="default"
                    icon="share-o">{{ rightBtn }}</van-button>
      </div>
    </div>
    <div class="songInfo">
      <van-cell-group>
        <van-cell v-for="(song, index) in songList"
                  :key="index"
                  :title="song.name"
                  @click="handleClick(index)">
          <template #icon>
            <span class="index">{{ index + 1 }}</span>
          </template>
          <template #label>
            <template v-if="song.ar.length >= 2">
              <span v-for="(ar, idx) in song.ar"
                    :key="idx">
                {{ idx == song.ar.length - 1 ? ar.name : ar.name + " /" }}
              </span>
              <span>{{ " - " + song.al.name }}</span>
            </template>
            <template v-else>
              <span>{{ song.ar[0].name }}</span>
              <span>{{ " - " + song.al.name }}</span>
            </template>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    <Loading :loadingShow="loadingShow" />
  </div>
</template>

<script>
import Navbar from '@/components/navbar'
import Loading from '@/components/loading'
import { formatDate, EventBus, judgeLogin } from '../../../currency'
import { getPlaylistDetail, getSongDetail, getSubscribe } from '@/api/songSheet'
export default {
  name: 'rankingDtl',
  data() {
    return {
      leftBtn: '0',
      centerBtn: '0',
      rightBtn: '0',
      playlist: {},
      songList: [],
      loadingShow: false,
      rankId: '',
    }
  },
  components: { Navbar, Loading },
  methods: {
    // 评论
    handleComment() {
      this.$router.push({
        path: `/comment`,
        query: {
          id: this.rankId,
        },
      })
    },
    // 收藏
    handleCollection() {
      judgeLogin(this)
      let cookie = this.$store.state.userInfo.cookie
      // getSubscribe(cookie).then(res=>{
      // })
    },
    // 点击更改播放列表
    handleClick(index) {
      this.$store.commit('getIndex', index)
      this.$store.commit('getSongList', this.songList)
      EventBus.$emit('playMusic', '播放音乐')
    },
    // 获取歌曲数据
    async initData(id) {
      this.rankId = id
      let cookie = this.$store.state.userInfo.cookie || ''
      this.loadingShow = true
      getPlaylistDetail(id, cookie).then((res) => {
        this.leftBtn =
          Number(res.playlist.subscribedCount / 10000).toFixed(0) + '万'
        this.centerBtn =
          Number(res.playlist.commentCount / 10000).toFixed(0) + '万'
        this.rightBtn = res.playlist.shareCount
        this.playlist = {
          name: res.playlist.name,
          updateTime:
            formatDate(res.playlist.updateTime)
              .slice(5, 10)
              .replace('-', '月') + '日',
        }
        let ids = []
        res.privileges.forEach((song) => {
          ids.push(song.id)
        })

        getSongDetail(ids, cookie).then((res) => {
          this.songList = res.songs
          this.loadingShow = false
        })
      })
    },
  },
  created() {
    this.initData(this.$route.query.id)
  },
}
</script>

<style scoped>
#rankingDtl {
  width: 100%;
  height: 100%;
}
.songSheetInfo {
  width: 100%;
  text-align: center;
}
.songSheetInfo h2 {
  font-size: 42px;
  margin: 0;
}
.songSheetInfo p {
  font-size: 12px;
  padding: 10px 0;
}
.btn-warp {
  margin: 0 auto;
  width: 80%;
}
.btn-warp button {
  width: 33.333%;
  height: 35px;
}
.btn-warp button:nth-child(1) {
  border-radius: 15px 0 0 15px;
}
.btn-warp button:nth-child(3) {
  border-radius: 0 15px 15px 0;
}
.index {
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
</style>